/* eslint-disable react-hooks/exhaustive-deps */
import styles from "./index.module.scss";
import { useEffect, useState } from "react";
//antd组件
import {
  Card,
  Breadcrumb,
  Form,
  DatePicker,
  Button,
  Divider,
  Radio,
  Table,
  Tag,
  Tooltip,
  Popconfirm,
  message,
} from "antd";
import { EditOutlined, RestOutlined } from "@ant-design/icons";
//频道组件
import Channel from "components/Channel";
//路由
import { Link } from "react-router-dom";

//文章API
import { getArticleListAPI, delArticleListAPI } from "api/article";

const { RangePicker } = DatePicker;
export default function Content(props) {
  //文章列表
  const [articleList, setArticleList] = useState([]);
  //请求参数
  const [articleParams, setArticleParams] = useState({
    page: 1,
    per_page: 7,
  });

  //钩子请求
  useEffect(async () => {
    //请求频道列表
    getArticleList();
  }, []);
  //监听分页参数变化
  useEffect(async () => {
    getArticleList();
  }, [articleParams]);

  //请求文章列表
  async function getArticleList() {
    const res = await getArticleListAPI(articleParams);
    setArticleList(res.data);
  }

  //筛选
  const onFinish = async (value) => {
    //参数处理
    const params = { ...value };
    if (params.status === -1) delete params.status;
    if (params.channel_id === -1) delete params.channel_id;
    if (params.date) {
      const begin_pubdate = params.date[0].format("YYYY-MM-DD");
      const end_pubdate = params.date[1].format("YYYY-MM-DD");
      params.begin_pubdate = begin_pubdate;
      params.end_pubdate = end_pubdate;
    }
    delete params.date;
    //发起请求
    setArticleParams({ ...params, page: 1, per_page: 7 });
  };
  //删除文章
  const delArticleList = async (id) => {
    await delArticleListAPI(id);
    message.error("删除成功");
    getArticleList();
  };
  //列表表头
  const columns = [
    {
      title: "封面",
      dataIndex: "cover",
      key: "id",
      render: (cover) => {
        // eslint-disable-next-line jsx-a11y/alt-text
        return <img src={cover.images} className="lalala" />;
      },
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "id",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "id",
      render: (status) => {
        if (status === 0) return <Tag color="processing">草稿</Tag>;
        if (status === 1) return <Tag color="warning">待审核</Tag>;
        if (status === 2) return <Tag color="success">审核通过</Tag>;
        if (status === 3) return <Tag color="error">审核失败</Tag>;
      },
    },
    {
      title: "发布时间",
      dataIndex: "pubdate",
      key: "id",
    },
    {
      title: "阅读数",
      dataIndex: "read_count",
      key: "id",
    },
    {
      title: "点赞数",
      dataIndex: "like_count",
      key: "id",
    },
    {
      title: "操作",
      render: (text, record) => {
        return (
          <>
            <Tooltip title="编辑">
              <Button
                type="primary"
                shape="circle"
                onClick={() => props.history.push(`/Layout/Edit/${record.id}`)}
                icon={<EditOutlined />}
                style={{ margin: "0 12px" }}
              />
            </Tooltip>
            <Tooltip
              title={
                record.status === 2
                  ? "只可删除草稿或者未通过审核的文章"
                  : "删除"
              }
            >
              <Popconfirm
                disabled={record.status === 2}
                title="你真的真的真的要删除吗嘛嘛嘛麻麻?"
                onConfirm={() => {
                  delArticleList(record.id);
                }}
                okText="确认"
                cancelText="不"
              >
                <Button
                  disabled={record.status === 2}
                  type="primary"
                  shape="circle"
                  danger
                  ghost
                  icon={<RestOutlined />}
                />
              </Popconfirm>
            </Tooltip>
          </>
        );
      },
    },
  ];
  return (
    <div className={styles.Content}>
      {/* 面包屑 */}
      <Card bordered={false} style={{ width: "100%", margin: "20px 0" }}>
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link to="/Layout/Home">首页</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>内容管理</Breadcrumb.Item>
        </Breadcrumb>
        <Divider />
        {/* 表单 */}
        <Form
          name="time_related_controls"
          onFinish={onFinish}
          initialValues={{
            status: -1,
            channel_id: -1,
          }}
        >
          {/* 单选 */}
          <Form.Item name="status" label="状态">
            <Radio.Group>
              <Radio value={-1}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
              <Radio value={3}>审核失败</Radio>
            </Radio.Group>
          </Form.Item>
          {/* 频道 */}
          <Form.Item name="channel_id" label="频道">
            <Channel></Channel>
          </Form.Item>
          {/* 日期 */}
          <Form.Item name="date" label="日期">
            <RangePicker />
          </Form.Item>
          {/* 提交 */}
          <Form.Item>
            <Button type="primary" htmlType="submit">
              筛选
            </Button>
          </Form.Item>
        </Form>
        <p>
          据以上条件查询,共有<b>{articleList.total_count}</b>条数据
        </p>
        <Table
          dataSource={articleList.results}
          columns={columns}
          loading={articleList.length}
          pagination={{
            position: ["bottomCenter"],
            hideOnSinglePage: true,
            defaultPageSize: 7,
            pageSizeOptions: [7, 15, 40, 100],
            total: articleList.total_count,
            showQuickJumper: true,
            current: articleParams.page,
            onChange: (page, pageSize) => {
              //翻页改变数据重新请求
              setArticleParams({
                ...articleParams,
                page: articleParams.per_page !== pageSize ? 1 : page,
                per_page: pageSize,
              });
            },
          }}
        />
      </Card>
    </div>
  );
}
